/*******************************************************************************
 * Copyright 2013
 * Ubiquitous Knowledge Processing (UKP) Lab
 * Technische Universität Darmstadt
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *   http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 ******************************************************************************/

body,
table{
    font-family:"Arial", "Helvetica", "Verdana", "sans-serif";
    font-size:10pt;
}

/* Fix for https://bugs.webkit.org/show_bug.cgi?id=86266 */
input {
	opacity: 0.99;
}

html,body{
    margin:0;
    padding:0;
    min-height:100%;
    height:100%;
}

label,label.left {
    white-space:nowrap;
    display: block;
    text-align: right;
    font-weight: bold;
}

label.top {
    text-align: left;
}

label.inline {
    text-align: inherit;
    display: inline;
}

ul label {
    display: inline;
    text-align: left;
    font-weight: normal;
}

.inline-labels label {
    display: inline;
}

fieldset {
    -moz-border-radius: 6px; -webkit-border-radius: 6px; -khtml-border-radius: 6px; border-radius: 6px;
}

.buttons{
    text-align: right;
}

ul.vcheckboxgroup{
    padding:0px;
    margin: 0px;
    list-style:none;
    white-space:nowrap;
}

.hfill {
    width: 100%;
    max-width: none;
}

.vfill {
    height: 100%;
    max-height: none;
}

/* 
 * Safari does not apply height:100% in table cells, but relative positioning works. In Firefox
 * this does not work.
 */
.webkit td.vfill{
    position: relative;
}

.webkit td.vfill > *{
    top: 0px; 
    bottom: 0px; 
    left: 0px;
    right: 0px;
    position:absolute; 
}

select.hfill {
    min-width: 100%;
}

select.hfill[multiple] {
    width: auto; /* If the select content is very large, this forces the select to accomodate the
 *  full expanded content... usually not what we want, only the popup should be full-width. But
 *  for multiple selection, we really want to show the full width by default*/
}

/* For better viewing, split long lines in select boxes (on the "Best Queries" page) */
.breakword {
    -ms-word-break: break-all;
    word-break: break-all;
    // Non standard for webkit
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

/* Also indent lines from 2nd line on to make clear which lines belong to which option */
.breakword option {
    text-indent: -20px;
    padding-left: 23px;
}

.nowrap {
    white-space:nowrap;
}

.centering {
    text-align: center;
}

.centering .wicketstuff-progressbar {
    margin-left: auto;
    margin-right: auto;
}

.centering table {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* -------------------------------------------------------------------------------------------------
 * Page header
 */

.logo{
    margin:2px;
    float:right;
    vertical-align:middle;
    height:64px;
}

.pageicon{
    margin:2px;
    float:left;
    vertical-align:middle;
    height:64px;
}

.pageheader{
    font-weight:bold;
    font-size:39px;
    vertical-align:middle;
    background-color:#B90F22;
    content:'<div style="clear:both"/>';
}

.pagecontent{
    padding-bottom: 1.5em;
}

.pagefooter{
    clear: both;
    width: 100%;
    position:fixed;
    bottom: 0px;
    text-align: center;
    vertical-align:middle;    
    border-top: solid grey 1px;
    color: grey;
    background: white;
    z-index: 9999;
}

/* -------------------------------------------------------------------------------------------------
 * Menu
 */

.menubar{
    vertical-align:middle;
    background-color:#4D4D4D;
    color:yellow;
    margin-bottom:20px;
}

.menubar a{
    color:yellow;
}

/* -------------------------------------------------------------------------------------------------
 * Welcome page icon menu
 */

/* Use for a horizontal list of icons */
ul.horizontal{
}

ul.horizontal li{
    display:inline-block;
}

/* Caption of the icon */
ul.horizontal li div{
    text-align:center;
}

/* -------------------------------------------------------------------------------------------------
 * Info panel
 */

.info{
    position:relative;
    clear:both;
    min-height:158px; /* 128(img) + 2*15(img-padding) */
    max-height:250px;
    position:relative;
    margin:0.7em;
    /*
    background-color:yellow;
    border:solid black 1px;
*/
}

.biginfo {
	min-height: 400px;
	max-height: 400px;
}

.info .content{
    top: 0px; 
    bottom: 0px; 
    left: 0px;
    right: 0px;
    position:absolute; 
    margin: 7px; 
    overflow:auto;
}

.icon + .content  {
    left: 158px; /* 128(img) + 2*15(img-padding) */
}

.info .content p{
    margin-top:0px;
    padding:0px;
}

.info .icon{
    padding:15px;
    float:left;
    height:128px;
}

.info .buttons{
    position:absolute;
    bottom:0px;
    right:0px;
    max-height:25px;
}

.infomargin {
	margin: 0.7em;
}

.infomargin .content {
	margin: 7px;
}

/* -------------------------------------------------------------------------------------------------
 * KWIC table
 */

.headers,
.headers a:link,
.headers a:visited{
    background-color:#B90F22;
    color:white;
    vertical-align: bottom;
}

tr.headers th.wicket_orderDown a{
    padding-right:24px;
    background-image:url(../images/descending.png);
    background-position: right;
    background-repeat:no-repeat;
}

tr.headers th.wicket_orderUp a{
    padding-right:24px;
    background-image:url(../images/ascending.png);
    background-position: right;
    background-repeat:no-repeat;
}

div.navigatorLabel{
    float:left;
}

div.navigator{
    text-align:right;
}

th{
    padding:3px;
}

td{
    vertical-align:top;
    padding:3px;
}

tr.odd{
    background:#EEEEEE;
}

tr.even{
    background:#DDDDDD;
}

tr.odd:hover{
    background:#CCCCAA;
}

tr.even:hover{
    background:#CCCCAA;
}

td.editable{
    background:khaki;
    cursor:pointer;
}

td.correct{
    font-weight:bold;
    color:white;
    background:limegreen;
}

td.wrong{
    font-weight:bold;
    color:white;
    background:crimson;
}

td.check{
    font-weight:bold;
    color:black;
    background:yellow;
}

td.pred_correct{
    font-weight:bold;
    color:black;
    background:#66ff66; /* 60% limegreen */
    font-style:italic;
}

td.pred_wrong{
    font-weight:bold;
    color:black;
    background:#ea728a; /* 60% crimson */
    font-style:italic;
}

td.leftContext{
    text-align:right;
}

td.match{
    padding-left: .5em;
    padding-right: .5em;
    border-left: 1px black solid;
    border-right: 1px black solid;
    text-align:center;
}

td.rightContext{
    text-align:left;
}

.showCol{
    display:table-cell;
}

.hideCol{
    display:none;
}

.clickableElement{
    cursor:pointer;
}

/* -------------------------------------------------------------------------------------------------
 * Context view
 */

.contextView{
    background-color:white;
}

.contextUnitLeft{
    font-weight:bold;
    background:#DDDDDD;
}

.contextMatch{
    font-weight:bold;
    background:#999999;
}

.contextUnitRight{
    font-weight:bold;
    background:#DDDDDD;
}

